<template>
  <div class="group-detail">
    <div class="group-detail-content">
      <div class="row-group-wrapper">
        <el-row class="row-group">
          <el-col class="col-item" :span="12">
            <span class="label">团购名称：</span>
            <el-input class="input" disabled v-model="group.name"></el-input>
          </el-col>
        </el-row>
        <div
          class="row-group"
          v-for="(oneGroupBrandAdd, index1) in groupBrandAddList"
          :key="index1"
        >
          <el-row class="row-group_brand">
            <el-col class="col-item" :span="12">
              <span class="label">所属品牌：</span>
              <el-input
                class="input"
                disabled
                v-model="oneGroupBrandAdd.title"
              ></el-input>
            </el-col>
            <el-col class="col-item" :span="12">
              <span class="label">参展车型：</span>
              <el-select
                v-model="oneGroupBrandAdd.subBrandId"
                placeholder="请选择"
                disabled
              >
                <el-option
                  v-for="item in groupBrandList"
                  :label="item.brand_name"
                  :key="item.brand_id"
                  :value="item.brand_id"
                >
                </el-option>
              </el-select>
            </el-col>
          </el-row>
          <div
            class="row-group_brand"
            v-if="oneGroupBrandAdd.subList && oneGroupBrandAdd.subList.length"
          >
            <div
              class="row-group_brand"
              :key="index2"
              v-for="(subSubItem, index2) in oneGroupBrandAdd.subList"
              v-if="
                subSubItem.child &&
                subSubItem.child.length &&
                judgeFn(subSubItem.child)
              "
            >
              <div class="brand_name">
                <el-checkbox disabled v-model="subSubItem.checked">{{
                  subSubItem.name
                }}</el-checkbox>
              </div>
              <div class="brand_list">
                <el-checkbox
                  disabled
                  :key="lastItem.id"
                  v-for="lastItem in subSubItem.child"
                  v-model="lastItem.checked"
                  v-if="lastItem.checked"
                  >{{ lastItem.name }}</el-checkbox
                >
              </div>
            </div>
          </div>
        </div>
        <el-row class="row-group">
          <el-col class="col-item" :span="12">
            <span class="label">团购地区：</span>
            <el-input class="input" disabled v-model="group.area"></el-input>
          </el-col>
          <el-col class="col-item" :span="12">
            <span class="label">咨询热线：</span>
            <el-input class="input" disabled v-model="group.hotLine"></el-input>
          </el-col>
        </el-row>
        <el-row class="row-group">
          <el-col class="col-item" :span="12">
            <span class="label">开始时间：</span>
            <el-input
              class="input"
              disabled
              v-model="group.startTime"
            ></el-input>
          </el-col>
          <el-col class="col-item" :span="12">
            <span class="label">结束时间：</span>
            <el-input class="input" disabled v-model="group.endTime"></el-input>
          </el-col>
        </el-row>
        <el-row class="row-group">
          <el-col class="col-item" :span="12">
            <span class="label">关联卡包ID：</span>
            <el-input
              class="input"
              disabled
              v-model="group.cardBagId"
            ></el-input>
          </el-col>
          <el-col class="col-item" :span="12">
            <span class="label">备注语：</span>
            <el-input class="input" disabled v-model="group.remark"></el-input>
          </el-col>
        </el-row>
        <el-row class="row-group">
          <el-col class="col-item" :span="12">
            <span class="label">意向金：</span>
            <el-input
              class="input"
              disabled
              v-model="group.intentionMoney"
            ></el-input>
          </el-col>
          <el-col class="col-item" :span="12">
            <span class="label">初始值：</span>
            <el-input
              class="input"
              disabled
              v-model="group.initValue"
            ></el-input>
          </el-col>
        </el-row>
        <el-row class="row-group">
          <el-col class="col-item" :span="12">
            <span class="label">目标集客量：</span>
            <el-input
              class="input"
              disabled
              v-model="group.ncgb_target_num"
            ></el-input>
          </el-col>
        </el-row>
        <el-row class="row-group">
          <el-col style="display: flex; align-items: flex-start;" class="col-item" :span="24">
                        <span class="label">团购优惠：</span>
                        <div class="group-desc" v-html="group.desc">

                        </div>
                    </el-col>
        </el-row>
        <el-row class="row-group">
          <el-col class="col-item" :span="24">
            <span class="label">活动头图：</span>
            <a class="img-wrapper" :href="group.headerImage" target="_blank">
              <img :src="group.headerImage" alt="" class="img-header" />
            </a>
          </el-col>
        </el-row>
        <!-- <el-row class="row-group">
                    <el-col class="col-item" :span="24">
                        <span class="label">标签图片：</span>
                        <a class="img-wrapper" :href="group.markImage" target="_blank">
                            <img :src="group.markImage" alt="" class="img-mark">
                        </a>
                    </el-col>
                </el-row>-->
        <el-row class="row-group">
          <el-col class="col-item" :span="24">
            <span class="label">logo图片：</span>
            <a class="img-wrapper" :href="group.logoImage" target="_blank">
              <img :src="group.logoImage" alt="" class="img-logo" />
            </a>
          </el-col>
        </el-row>
        <!-- <el-row class="row-group">
                    <el-col class="col-item" :span="24">
                        <span class="label">流程图片：</span>
                        <a class="img-wrapper img-flow-wrapper" :href="group.flowImage" target="_blank">
                            <img :src="group.flowImage" alt="" class="img-flow">
                        </a>
                    </el-col>
                </el-row>-->
        <el-row class="row-group">
          <el-col class="col-item" :span="24">
            <span class="label">分享海报：</span>
            <a class="img-wrapper" :href="group.postImage" target="_blank">
              <img :src="group.postImage" alt="" class="img-post" />
            </a>
          </el-col>
        </el-row>
      </div>
    </div>
    <div class="group-detail-footer">
      <div class="row-group-wrapperq">
        <el-row class="row-group">
          <el-col
            style="display: flex; justify-content: center"
            class="col-item"
            :span="24"
            v-if="readonly === false"
          >
            <el-button @click="setCheckStatus(2)" type="primary"
              >审核通过</el-button
            >
            <el-button @click="setCheckStatus(3)" type="info"
              >审核不通过</el-button
            >
          </el-col>
        </el-row>
      </div>
    </div>
  </div>
</template>

<script>
import { dateFormatter } from "../../../../common/js/util";

export default {
  data() {
    return {
      group: {},
      groupBrandAddList: [],
    };
  },
  props: {
    id: {
      type: Number,
      default: 0,
    },
    groupBrandList: {
      type: Array,
      default() {
        return [];
      },
    },
    readonly: {
      type: Boolean,
      default: false,
    },
  },
  methods: {
    judgeFn(arr) {
      return arr.some((item) => item.checked === true);
    },
    getSubBrandListByPid(oneGroupBrandAdd, arr) {
      this.$http
        .post("/admin/newCarGroupBuy/index.php?act=groupBuy&op=getChildBrand", {
          pid: oneGroupBrandAdd.subBrandId,
        })
        .then(function (res) {
          if (res.code == 1) {
            if (res.data && res.data.length) {
              var subList = res.data.map(function (item) {
                var num = 0;
                if (item.child && item.child.length) {
                  var child = item.child.map(function (subItem) {
                    var a = {
                      id: subItem.brand_id,
                      name: subItem.brand_name,
                    };
                    if (
                      arr &&
                      arr.find(function (m) {
                        return m.brand_id == subItem.brand_id;
                      })
                    ) {
                      a.checked = true;
                      num++;
                    } else {
                      a.checked = false;
                    }
                    return a;
                  });
                }
                var b = {
                  id: item.brand_id,
                  name: item.brand_name,
                  child: child ? child : [],
                };
                if (arr && num != 0 && child && num == child.length) {
                  b.checked = true;
                } else {
                  b.checked = false;
                }
                return b;
              });
              oneGroupBrandAdd.subList = subList;
            } else {
              oneGroupBrandAdd.subList = [];
            }
          } else {
            alert(res.msg);
          }
        });
    },
    getGroupDetail() {
        console.log(this.group,'group');
      let that = this;
      this.$http
        .post("/admin/newCarGroupBuy/index.php?act=groupBuy&op=info", {
          id: this.id,
        })
        .then(function (res) {
            console.log(res,'res');
          if (res.code == 1) {
            that.group = {
              id: res.data.ncgb_id,
              name: res.data.ncgb_title_name,
              category: res.data.ncgb_class_name,
              area: res.data.ncgb_province_name + res.data.ncgb_city_name,
              hotLine: res.data.ncgb_hotline,
              startTime: dateFormatter(
                "YYYY-MM-DD HH:mm:ss",
                res.data.asgb_start_time * 1000
              ),
              endTime: dateFormatter(
                "YYYY-MM-DD HH:mm:ss",
                res.data.asgb_end_time * 1000
              ),
              cardBagId: res.data.ncgb_package_id,
              remark: res.data.ncgb_tip_words,
              intentionMoney: res.data.ncgb_intention_gold,
              initValue: res.data.ncgb_init_value,
              desc: res.data.ncgb_details,
              reason: res.data.ncgb_reject_reason,
              headerImage: res.data.ncgb_header_image,
              markImage: res.data.ncgb_label_image,
              logoImage: res.data.ncgb_logo_image,
              flowImage: res.data.ncgb_process_image,
              postImage: res.data.ncgb_share_poster_image,
              brands: res.data.ncgb_brands,
              ncgb_target_num:res.data.ncgb_target_num,
            };
            for (let i = 0; i < res.data.ncgb_brands.length; i++) {
              let tempObj = {
                title: res.data.ncgb_brands[i].brand_name,
                subBrandId: res.data.ncgb_brands[i].brand_id,
                subList: [],
              };
              that.groupBrandAddList.push(tempObj);
              that.getSubBrandListByPid(
                tempObj,
                res.data.ncgb_brands[i].children
              );
            }
            setTimeout(() => {
              // console.log(that.groupBrandAddList)
            }, 1000);
          } else {
            alert(res.msg);
          }
        });
    },
    async setCheckStatus(checkStatus) {
      try {
        let reason = "",
          cancel = false;
        if (checkStatus === 3) {
          reason = await this.$prompt("请输入不通过原因", "提示", {
            confirmButtonText: "确定",
            cancelButtonText: "取消",
            inputPlaceholder: "填写不通过原因",
            // inputValue: this.group.reason || '',
            inputValidator: (value) => {
              if (!value) return "原因不能为空";
              else if (value.length > 100) return "长度不能超过100个字符";
              else return true;
            },
          })
            .then(({ value }) => value)
            .catch(() => (cancel = true));
        }
        if (cancel) return;
        const res = await this.$http.post(
          "/admin/newCarGroupBuy/index.php?act=groupBuy&op=audit",
          {
            id: this.group.id,
            status: checkStatus,
            reason,
          }
        );
        if (res.code == 1) {
          this.$emit("cancel", this.id, checkStatus);
          this.$parent.$parent.getListData();
        } else {
          throw res.msg;
        }
      } catch (error) {
        this.$message.error(`${error}`);
      }
    },
  },
  created() {
    this.getGroupDetail();
  },
  name: "group-detail",
};
</script>

<style lang="scss" scoped>
.group-detail {
  height: 100%;
  padding: 0 30px;
  display: flex;
  flex-direction: column;
  font-size: 14px;
  &-footer {
    max-width: 1170px;
    flex: none;
    margin-top: 32px;
    padding: 20px;
    padding-top: 0;
  }
  &-content {
    flex: auto;
    overflow-y: auto;
  }
  .row-group-wrapper {
    max-width: 1170px;
  }
  .row-group {
    .col-item {
      .label {
        display: inline-block;
        font-weight: 600;
        width: 100px;
        text-align: right;
      }
      .input {
        width: 400px;
      }
      .group-desc {
        box-sizing: content-box;
        width: 375px;
        border: 1px solid #e4e7ed;
        /deep/img {
          width: 100%;
          float: left;
        }
      }
      .img-wrapper {
        .img-header {
          width: 360px;
          height: 188px;
          vertical-align: top;
        }
        .img-mark {
          width: 360px;
          height: 21px;
          vertical-align: top;
        }
        .img-logo {
          width: 50px;
          height: 50px;
          vertical-align: top;
        }
        .img-flow {
          width: 180px;
        }
        .img-post {
          width: 180px;
          vertical-align: top;
        }
      }
      .img-wrapper.img-flow-wrapper {
        display: inline-block;
        width: 180px;
        max-height: 320px;
        overflow-y: auto;
        vertical-align: top;
      }
      .img-wrapper + .img-wrapper {
        margin-left: 20px;
      }
    }
  }
  .row-group + .row-group {
    margin-top: 20px;
  }
  .row-group_brand + .row-group_brand {
    margin-top: 10px;
  }
  .brand_name {
    margin-left: 50px;
  }
  .brand_list {
    margin-left: 100px;
  }
}
.el-textarea {
    width: 86%;
}
</style>
